<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <t-input v-model="password" filled type="password" hint="Password" />

      <t-input
        v-model="password"
        filled
        :type="isPwd ? 'password' : 'text'"
        hint="Password with toggle"
      >
        <template v-slot:append>
          <t-icon
            :name="isPwd ? 'visibility_off' : 'visibility'"
            class="cursor-pointer"
            @click="isPwd = !isPwd"
          />
        </template>
      </t-input>

      <t-input v-model="email" filled type="email" hint="Email" />

      <t-input v-model="search" filled type="search" hint="Search">
        <template v-slot:append>
          <t-icon name="search" />
        </template>
      </t-input>

      <t-input v-model="tel" filled type="tel" hint="Telephone number" />

      <t-input v-model="url" filled type="url" hint="URL" />

      <t-input v-model="time" filled type="time" hint="Native time" />

      <t-input v-model="date" filled type="date" hint="Native date" />
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        password: ref(''),
        isPwd: ref(true),

        email: ref(''),
        search: ref(''),
        tel: ref(''),
        url: ref(''),
        time: ref(''),
        date: ref(''),
      };
    },
  };
</script>
